/**
 * 登录页面逻辑
 *
 * @版权所有 rem.studio
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import Link from 'umi/link';
import { Alert, Modal, Row, Col, Input, message, Button } from 'antd';
import LoginComponent from '@/components/Login';
import styles from './Login.less';
import styled from 'styled-components';
import BaseComponent from '@/components/BaseComponent';

const { Tab, Tenant, UserName, Password, Mobile, Captcha, Submit } = LoginComponent;

const LoginBody = styled.div`
  margin-top: 48px;

  .login_cont {
    width: 1100px;
    height: 500px;
    margin: 0 auto;
    position: relative;
  }

  .log_img {
    width: 460px;
    height: 192px;
    padding: 50px 0 50px 40px;
    position: absolute;
    top: 110px;
    left: 8%;
    z-index: 10;
    //background: url('../../assets/logbg1.jpeg') no-repeat center top;
    //background-size: 100% 100%;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgb(0 0 0 / 30%);
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 30px;
      color: white;
    }
  }

  .log_bg {
    width: 550px;
    height: 450px;
    background: #fff;
    border-radius: 18px;
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: -400px;
    padding-left: 180px;
    padding-right: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .s_18 {
    font-size: 18px;
    color: #000000;
  }

  .s_14 {
    font-size: 18px;
    color: #cccccc;
    margin-bottom: 12px;
  }
`;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class Login extends BaseComponent {
  state = {
    type: 'account',
    autoLogin: true,
    imgUrl: '/api/account/captcha/generateImageCaptcha',
    captchaTip: false,
    // 用户名
    username: '',
    // 密码
    password: '',
  };

  handleImg = () => {
    this.setState({ imgUrl: `/api/account/captcha/generateImageCaptcha?${Math.random()}` });
  };

  onTabChange = type => {
    this.setState({ type });
  };

  onGetCaptcha = () =>
    new Promise((resolve, reject) => {
      this.loginForm.validateFields(['mobile'], {}, (err, values) => {
        if (err) {
          reject(err);
        } else {
          const { dispatch } = this.props;
          dispatch({
            type: 'login/getCaptcha',
            payload: values.mobile,
          })
            .then(resolve)
            .catch(reject);

          Modal.info({
            title: formatMessage({ id: 'app.login.verification-code-warning' }),
          });
        }
      });
    });

  /**
   * 登录按钮被点击
   */
  handleLoginClick = () => {
    const { username, password } = this.state;


    if (username == '' || password == '') {
      this.errorMessage('请将信息填写完整');
    }

    // password 必须8位以上16,包含大小写字母,数字特殊符号
    const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])[a-zA-Z\d\W_]{8,}$/;
    if (!reg.test(password)) {
      this.errorMessage('密码必须8位以上,包含大小写字母,数字特殊符号');
      return;
    }

    this.execHttp('login/login', {
      username: username,
      password: password,
      tenantCode: '10001',
      type: 'account',
    });
  };

  onChange = e => {
    const { value } = e.target;
    this.setState({
      charCaptcha: value,
      captchaTip: false,
    });
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  );

  render() {
    const { login } = this.props;
    const { type, autoLogin } = this.state; // NOSONAR
    return (
      <LoginBody>
        <div className={'login_cont'}>
          <div className={['log_img', styles.log_img_bg].join(' ')}>
            <span className={'title'}>Welcome</span>
            <span className={'title'}>农村癌症人群筛查系统</span>
          </div>
          <div className={'log_bg'}>
            <span className={'s_18'}>用户登录</span>
            <span className={'s_14'}>Login to access your account</span>
            <Input
              placeholder={'请输入用户名'}
              style={{ marginTop: '8px', marginBottom: '8px' }}
              value={this.state.username}
              onChange={e => {
                const val = e.target.value;
                this.setState({
                  username: val,
                });
              }}
            />
            <Input.Password
              placeholder={'请输入密码'}
              value={this.state.password}
              style={{ marginTop: '8px', marginBottom: '8px' }}
              onChange={e => {
                const val = e.target.value;
                this.setState({
                  password: val,
                });
                ``;
              }}
              onKeyUp={event => {
                if (event.keyCode == 13) {
                  this.handleLoginClick();
                }
              }}
            />
            <Button
              loading={this.props.submitting}
              type="primary"
              style={{ marginTop: '12px' }}
              onClick={this.handleLoginClick}
            >
              登录
            </Button>
          </div>
        </div>
      </LoginBody>
    );
  }
}

export default Login;
